<template>
  <div class="orderList_container">
    <!--ul v-load-more="loaderMore" v-if="orderList.length" type="1"-->
    <ul v-if="orderList.length" type="1">
      <router-link :to="{path: 'order/detail', query:{index: index}}" v-for="(item, index) in orderList" tag='li' :key="item.id" class="shop_li">
        <div class="page">
          <li>订单号: {{item.odrId}}</li>
          <li>订单日期: {{item.odrDt}}</li>
          <li>订单金额: {{item.odrAmt}}</li>
          <li v-if="item.odrStatus==='A'">订单状态: 待支付</li>
          <li v-else-if="item.odrStatus==='S'">订单状态: 已支付</li>
          <li v-else-if="item.odrStatus==='F'">订单状态: 支付失败</li>
        </div>
      </router-link>
    </ul>
    <ul v-else class="animation_opactiy">
      <li class="list_back_li" v-for="item in 10" :key="item">
        <img src="static/image/shopback.svg" class="list_back_svg">
      </li>
    </ul>
    <p v-if="touchend" class="empty_data">没有更多了</p>
    <aside class="return_top" @click="backTop" v-if="showBackStatus">
      <svg class="back_top_svg">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
      </svg>
    </aside>
    <div ref="abc" style="background-color: red;"></div>
    <transition name="loading">
      <loading v-show="showLoading"></loading>
    </transition>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {apiGetOrderList} from '@/service/apiRent'
  import {imgBaseUrl} from '@/config/env'
  import {showBack, animate} from '@/config/mUtils'
  import {loadMore, getImgPath} from '@/myutl/mixin'
  import loading from '@/components/common/loading'
  import ratingstar from '@/components/common/ratingstar'
  import alertTip from '@/components/common/alertTip'

  export default {
    data(){
      return {
        offset: 0,      // 批次加载店铺列表，每次加载20个 limit = 20
        // orderListArr:[], // 合同列表数据
        preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
        showBackStatus: false, //显示返回顶部按钮
        showLoading: true, //显示加载动画
        touchend: false, //没有更多数据
        imgBaseUrl,
        showAlert: false, //显示提示组件
        alertText: null, //提示的内容
      }
    },
    mounted(){
      this.initData();
    },
    components: {
      loading,
      ratingstar,
      alertTip
    },
    props: [
      'userId',
      'restaurantCategoryId',
      'restaurantCategoryIds',
      'sortByType',
      'deliveryMode',
      'supportIds',
      'confirmSelect',
      'geohash'],
    mixins: [loadMore, getImgPath],
    computed: {
      ...mapGetters([
        'storeUserRent'
      ]),
      hasorderList: function() {
        return this.storeUserRent.orderList === null ? false : true;
      },
      orderList: function() {
        return this.storeUserRent.orderList === null ? [] : this.storeUserRent.orderList;
      }
    },
    updated(){
      // console.log(this.supportIds, this.sortByType)
    },
    methods: {
      async initData() {
        console.log("this.hasorderList:", this.hasorderList);
        if (!this.hasorderList) {
          this.$store.dispatch('getOrderList', this.userId);  // 异步获取信息
        }

        this.hideLoading();
        //开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
        showBack(status => {
          this.showBackStatus = status;
        });
      },
      //到达底部加载更多数据
      async loaderMore(){
        if (this.touchend) {
          return
        }
        //防止重复请求
        if (this.preventRepeatReuqest) {
          return
        }
        this.showLoading = true;
        this.preventRepeatReuqest = true;

        //数据的定位加20位
        this.offset += 20;
        let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
        this.hideLoading();
        this.orderListArr = [...this.orderListArr, ...res];
        //当获取数据小于20，说明没有更多数据，不需要再次请求数据
        if (res.length < 20) {
          this.touchend = true;
          return
        }
        this.preventRepeatReuqest = false;
      },
      //返回顶部
      backTop(){
        animate(document.body, {scrollTop: '0'}, 400,'ease-out');
      },
      //监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
      async listenPropChange(){
        this.showLoading = true;
        this.offset = 0;
        let res = await shopList(this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
        this.hideLoading();
        //考虑到本地模拟数据是引用类型，所以返回一个新的数组
        this.orderListArr = [...res];
      },
      //开发环境与编译环境loading隐藏方式不同
      hideLoading(){
        this.showLoading = false;
      },
      zhunshi(supports){
        let zhunStatus;
        if ((supports instanceof Array) && supports.length) {
          supports.forEach(item => {
            if (item.icon_name === '准') {
              zhunStatus = true;
            }
          })
        }else{
          zhunStatus = false;
        }
        return zhunStatus
      },
      closeTip() {
        this.showAlert = false;
      }
    },
    watch: {
      //监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
      restaurantCategoryIds: function (value){
        this.listenPropChange();
      },
      //监听父级传来的排序方式
      sortByType: function (value){
        this.listenPropChange();
      },
      //监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
      confirmSelect: function (value){
        this.listenPropChange();
      },
      hasOrder: function(val, oldVal) {
        console.log("hasOrder:", val, oldVal)

        if (val === true) {
          this.orderListArr = this.orderList;
          console.log("orderListArr:", this.orderListArr)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';
  .orderList_container{
    background-color: #fff;
    margin-bottom: 2rem;
  }
  .shop_li{
    display: flex;
    border-bottom: 0.025rem solid #f1f1f1;
    padding: 0.7rem 0.4rem;
  }
  .shop_img{
    @include wh(2.7rem, 2.7rem);
    display: block;
    margin-right: 0.4rem;
  }
  .list_back_li{
    height: 4.85rem;
    .list_back_svg{
      @include wh(100%, 100%)
    }
  }
  .loader_more{
    @include font(0.6rem, 3);
    text-align: center;
    color: #999;
  }
  .return_top{
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    .back_top_svg{
      @include wh(2rem, 2rem);
    }
  }
  .loading-enter-active, .loading-leave-active {
    transition: opacity 1s
  }
  .loading-enter, .loading-leave-active {
    opacity: 0
  }
  .page {
    margin: 0 auto;
    padding: 0.5rem 0 0 0;
    //width:300px;
    //height:100px;
    background-color: moccasin;
    -moz-box-shadow: 10px 10px 5px lightgrey;
    box-shadow: 10px 10px 5px lightgrey;
  }
</style>
